<template>
  <div>
    <div class="flex">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="el_bredcrumb">
        <el-breadcrumb-item :to="{ path: '/home/welcome' }" @click.native="click">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ breadcrumb }}</el-breadcrumb-item>

      </el-breadcrumb>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <img class="flex_img" :src="img" alt=""><i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="user" icon="el-icon-user">个人中心</el-dropdown-item>
          <el-dropdown-item command="set" icon="el-icon-setting">系统设置</el-dropdown-item>
          <el-dropdown-item command="err" divided icon="el-icon-s-tools">
            <el-button type="text" @click="open">退出账号</el-button>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

  </div>
</template>

<script>
import axios, { Axios } from 'axios'
export default {
  data() {
    return {
      user_id: '',
      dialogVisible: false,
      img: ''
    }
  },
  methods: {
    click() {
      this.$store.commit('BREAD', '/home/welcome')
    },
    handleCommand(command) {
      switch (command) {
        case 'user':
          this.$store.commit('BREAD', '/home/user')
          this.$router.push({
            path: '/home/set'
          })
          break
        case 'set':
          break
      }
    },
    router() {
      window.localStorage.setItem('login_admin', 'false')
      this.$router.replace({
        path: '/login'
      })
    },
    open() {
      this.$confirm('确定退出当前账号！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action, instance) => {
          if (action == 'confirm') {
            this.router()
            this.$message({
              message: '退出成功',
              type: 'success'
            })
          }
        }
      })
    }
  },
  computed: {
    breadcrumb() {
      return this.$store.state.breadcrumb
    }
  },
  mounted() {
    // console.log(axios)
    this.user_id = window.localStorage.getItem('user_id')
    if (!this.img) {
      axios({
        url: 'http://localhost:3000/user/' + this.user_id,
        method: 'GET'
      })
        .then(result => {
          this.img = result.data.image
          // console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
 
 <style lang="less" scoped>
.el-breadcrumb {
  line-height: 60px;
}
.flex {
  text-align: right;
  margin-right: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .flex_img {
    width: 35px;
    height: 35px;
    margin-right: 5px;
    vertical-align: middle;
    text-align: center;
    border-radius: 50%;
  }
}
.el-divider--horizontal {
  margin: 0px;
}
.el-dropdown-menu {
  top: 50px !important;
}
</style>